<template>
    <view>
        <view class="appAuth" @click="onShowProvince"></view>
        <block v-if="enable">
            <view class="picker-view" :class="{ pickerViewA: anims }">
                <view class="picker-view__pane">
                    <text @click="cityCancel">取消</text>
                    <text @click="citySure">确认</text>
                </view>
                <picker-view class="pick-view__group" @change="cityChange" @pickstart="chooseStart" @pickend="chooseEnd"
                    :value="pickerValue">
                    <picker-view-column indicator-class="item_active">
                        <view v-for="item in provinces" class="picker-item" :key="item.id" :data-id="item.id">{{ item.name }}
                        </view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="item in citys" class="picker-item" :key="item.id" :data-id="item.id">{{ item.name }}
                        </view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="item in areas" class="picker-item" :key="item.id" :data-id="item.id">{{ item.name }}
                        </view>
                    </picker-view-column>
                </picker-view>
            </view>
        </block>
    </view>
</template>

<script>
import {provinces, citys, areas} from './city';
export default {
    name: "picker-select",
    props: {
        p_c_a: { type: [Object, String, Boolean], default: {} },//省、市、区 用于记忆查询
    },
    data() {
        return {
            enable: false,
            anims: false,
            pickerValue: [0, 0, 0], // 地址选择器省市区 暂存 currentIndex
            provinces: [],	// 省 一级地址
            citys: [], 		// 市 二级地址
            areas: [], 		// 区 三级地址
            isCanConfirm: true //是否禁止在第一列滚动期间点击确定提交数据
        };
    },
    created() {
        let that = this;
        this.provinces = provinces;
    },
    methods: {
        // 显示选择器
        async onShowProvince() {
            let p_c_a = this.p_c_a;
            let that = this;
            if (p_c_a && (p_c_a.p_name || p_c_a.c_name || p_c_a.a_name)) {
                that.provincePicker(p_c_a);
            } else {
                that.initPick();
            }
            that.enable = true;
            that.$nextTick(() => {
                that.anims = true;
            })
        },
        // 隐藏选择器
        async onHideProvince() {
            let that = this
            that.anims = false
            setTimeout(function () {
                that.pickerValue = [0, 0, 0]
                that.enable = false
            }, 350);
        },
        // 初始选择器
        initPick() {
            // 默认联动显示北京
            var id = provinces[0].id
            this.provinces = provinces; // 34省
            this.citys = citys[id]; //默认北京市辖区
            this.areas = areas[citys[id][0].id];
        },
        // 
        chooseStart(e) {
            this.isCanConfirm = false
        },
        chooseEnd(e) {
            this.isCanConfirm = true
        },
        cityChange(e) {
            let arr = e.detail.value;
            // console.log("arr: " + JSON.stringify(arr));
            let provinceNum = arr[0];
            let cityNum = arr[1];
            let areaNum = arr[2];
            var p_id = provinces[provinceNum].id;
            if (this.pickerValue[0] !== provinceNum) {
                this.pickerValue = [provinceNum, 0, 0];
                this.citys = citys[p_id];
                this.areas = areas[citys[p_id][0].id]
            } else if (this.pickerValue[1] !== cityNum) {
                var c_id = citys[p_id][cityNum].id;
                this.pickerValue = [provinceNum, cityNum, 0];
                this.areas = areas[c_id];
            } else {
                this.pickerValue = [provinceNum, cityNum, areaNum];
            }
        },
        // 点击地区选择取消按钮
        cityCancel(e) {
            this.onHideProvince()
        },
        // 点击地区选择确定按钮
        citySure(e) {
            if (this.isCanConfirm) {
                var arr = this.pickerValue
                let obj = {
                    provinces: this.provinces[arr[0]] || null,
                    city: this.citys[arr[1]] || null,
                    area: this.areas[arr[2]] || null,
                }
                console.log("省市区: " + JSON.stringify(obj));
                this.$emit('confirm', obj)
                this.onHideProvince()
            }
        },
        // 记忆查询 地址逆解析
        async provincePicker({ p_name = '', c_name = '', a_name = '' }) {
            let that = this
            var arr_picker = [0, 0, 0]
            var p_id = provinces.find((item, index) => item.name == p_name || item.fullname == p_name).id
            arr_picker[0] = provinces.findIndex(item => item.name == p_name || item.fullname == p_name)

            var c_id = citys[p_id].find((item, index) => item.name == c_name || item.fullname == c_name).id
            arr_picker[1] = citys[p_id].findIndex(item => item.name == c_name || item.fullname == c_name)

            var a_id = areas[c_id].find((item, index) => item.name == a_name || item.fullname == a_name).id
            arr_picker[2] = areas[c_id].findIndex(item => item.name == a_name || item.fullname == a_name)

            this.provinces = provinces;
            this.citys = citys[p_id];
            this.areas = areas[c_id];

            that.$nextTick(() => {
                that.pickerValue = arr_picker
            })
        },
    }
}
</script>

<style scoped>
/* 地区级联选择器 */
.picker-view {
    position: fixed;
    width: 100%;
    display: flex;
    background-color: #ffffff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0rpx;
    bottom: -100%;
    transition: all 0.35s linear;
    border-top: 1rpx solid #eeeeee;
    z-index: 999;
}

.pickerViewA {
    bottom: 0rpx;
}

.picker-item {
    line-height: 70rpx;
    margin-left: 5rpx;
    margin-right: 5rpx;
    text-align: center;
}

.picker-view__pane {
    height: 100rpx;
    width: 100%;
    padding: 20rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.picker-view__pane text {
    color: #00cc88;
    font-size: 30rpx;
}

.pick-view__group {
    width: 96%;
    height: 450rpx;
}</style>